<template>
  <view class="x-checkbox" :class="{'is-disabled': disabled}" @click.stop="onChange">
    <view v-if="label" class="_label">{{ label }}</view>
    <x-icon name="icon-075" :size="size" :color="color" />
  </view>
</template>

<script>
import XIcon from '@/components/x-icon';
export default {
  name: 'XCheckbox',
  components: {
    XIcon
  },
  props: {
    checked: {
      type: Boolean,
      default: false
    },
    label: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    size: {
      type: Number,
      default: 32
    }
  },
  data() {
    return {

    };
  },
  computed: {
    color() {
      return this.disabled ? '#ccc' : (this.checked ? '#EB441F' : '#ccc');
    }
  },
  watch: {},
  created() {

  },
  methods: {
    onChange() {
      if (this.disabled) return false;
      this.$emit('update:checked', !this.checked);
      this.$emit('change', !this.checked);
    }
  }
};
</script>

<style lang="scss">
  .x-checkbox{
    display: flex; align-items: center;
    &.is-disabled{}
    ._label{ padding-right: 10px;}
  }
</style>
